<template>
    <div class="page-container">
        <h2 style="margin: 5px 0 15px">招聘职位</h2>

        <el-row justify="space-between" style="margin-bottom: 5px">
            <el-col :span="12">
                <el-input v-model="params.name" placeholder="请输入职位名称" size="small" clearable @keydown.enter.native="getTableList" style="width: 160px">
                    <template #suffix>
                        <el-icon :size="15" color="var(--el-color-primary)">
                            <ele-Search/>
                        </el-icon>
                    </template>
                </el-input>
                <el-popover placement="bottom-start" :width="910" trigger="click">
                    <template #reference>
                        <el-button size="small" :icon="Filter" style="margin-left: 10px">综合筛选</el-button>
                    </template>
                    <el-row>
                        <el-row>
                            <span style="line-height: 24px">工作性质</span>
                            <el-select size="small" v-model="params.type" placeholder="请选择" clearable style="margin: 0 20px 0 10px;width: 120px">
                                <el-option v-for="item in dictMap['StaffType']" :key="item.value" :label="item.name" :value="item.value"/>
                            </el-select>
                            <span style="line-height: 24px">工作城市</span>
                            <el-cascader ref="areaTree" size="small" v-model="paramsWorkLocation" :options="cityList" :props="props" style="margin: 0 20px 0 10px;width: 120px"/>
                            <span style="line-height: 24px">用人部门</span>
                            <el-tree-select v-model="params.oaDeptId" node-key="id" value-key="id" :props="{ value: 'id', label: 'name'}" :data="deptList" check-strictly :render-after-expand="false" filterable size="small" style="margin: 0 20px 0 10px"/>
                            <span style="line-height: 24px">招聘负责人</span>
                            <el-select size="small" v-model="params.liableId" placeholder="请选择" clearable style="margin-left: 10px;width: 120px">
                                <el-option v-for="item in dictMap['StaffType']" :key="item.value" :label="item.name" :value="item.value"/>
                            </el-select>
                        </el-row>
                        <el-row style="margin-top: 10px">
                            <el-button type="primary" size="small" @click="getTableList">确定</el-button>
                            <el-button size="small" @click="resetParams">重置</el-button>
                        </el-row>
                    </el-row>
                </el-popover>
                <el-button type="primary" size="small" @click="openCreate">新建招聘职位</el-button>
            </el-col>
        </el-row>

        <el-tabs v-model="params.state" @tab-change="tabChange">
            <el-tab-pane label="招聘中" name="1"/>
            <el-tab-pane label="停止招聘" name="0"/>
        </el-tabs>

        <div class="table-box">
            <el-table :data="tableList" size="small" class="tableList">
                <el-table-column prop="name" label="职位名称" min-width="120px" fixed="left">
                    <template v-slot="scope">
                        <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <!--          <template #header>-->
                <!--            <span style="margin-right:2px;">职位名称</span>-->
                <!--            <el-popover placement="bottom" :width="100">-->
                <!--              <template #reference>-->
                <!--                <el-icon :size="15" color="var(&#45;&#45;el-color-primary)">-->
                <!--                  <ele-Search/>-->
                <!--                </el-icon>-->
                <!--              </template>-->
                <!--              <el-input placeholder="请输入职位名称" v-model="params.name" size="small" clearable @keydown.enter.native="getTableList"></el-input>-->
                <!--            </el-popover>-->
                <!--          </template>-->
                <!--          <template #default="scope">-->
                <!--            <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>-->
                <!--          </template>-->
                <!--        </el-table-column>-->
                <el-table-column prop="oaDeptName" label="用人部门" width="100px"/>
                <el-table-column prop="type" label="工作性质" width="100px">
                    <template v-slot="scope">
                        <span v-for="item in dictMap['StaffType']" :key="item.value" v-show="item.value === scope.row.type">{{ item.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="num" label="招聘人数" width="120px"/>
                <el-table-column prop="joinedNum" label="已入职人数" width="120px"/>
                <el-table-column prop="experience" label="工作经验" min-width="100px">
                    <template v-slot="scope">
                        <span v-for="item in dictMap['WorkExperience']" :key="item.value" v-show="item.value === scope.row.experience">{{ item.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="eduLevel" label="学历要求" width="100px">
                    <template v-slot="scope">
                        <span v-for="item in dictMap['EducationLevel']" :key="item.value" v-show="item.value === scope.row.eduLevel">{{ item.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="薪资范围" width="120px">
                    <template v-slot="scope">
                        <span v-if="scope.row.salaryInterview === '1'">面谈</span>
                        <span v-else>
              {{ scope.row.salaryStart }} ~ {{ scope.row.salaryEnd }}
              <span v-for="item in dictMap['SalaryTimeType']" :key="item.value" v-show="item.value === scope.row.salaryTimeType">{{ item.name }}</span>
            </span>
                    </template>
                </el-table-column>
                <el-table-column label="年龄要求" width="130px">
                    <template v-slot="scope">
                        <span v-if="scope.row.ageRequire === '1'">不限</span>
                        <span v-else>{{ scope.row.ageStart }} ~ {{ scope.row.ageEnd }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="urgentLevel" label="紧急程度" width="100px">
                    <template v-slot="scope">{{ scope.row.urgentLevel === '0' ? '一般' : '紧急' }}</template>
                </el-table-column>
                <el-table-column prop="latestWorkDate" label="最晚到岗时间" width="130px"/>
                <el-table-column prop="workLocation" label="工作城市" width="160px"/>
                <el-table-column prop="liableName" label="招聘负责人" width="120px"/>
                <el-table-column prop="otherOffice" label="面试官" width="160px"/>
                <el-table-column prop="creator" label="创建人" min-width="100px"/>
                <el-table-column prop="createTime" label="创建时间" width="160px"/>
            </el-table>
            <div class="page-block">
                <el-pagination
                    v-model:currentPage="params.current"
                    v-model:page-size="params.size"
                    :page-sizes="[10, 20, 30, 40]"
                    :small="true"
                    :disabled="false"
                    :background="false"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :hide-on-single-page="true"
                    @size-change="sizeChange"
                    @current-change="currentChange"
                />
            </div>
        </div>

        <el-dialog v-model="dialogVisible" :title="formData.id ? '创建招聘职位' : '修改招聘职位'" width="750px">
            <el-form :model="formData" :rules="rules" label-width="120px" size="small" :inline="false" ref="formRef">
                <el-divider content-position="left">基本信息</el-divider>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="职位名称" prop="name">
                            <el-input v-model="formData.name" placeholder="请输入职位名称"/>
                        </el-form-item>
                        <el-form-item label="工作性质" prop="type">
                            <el-select v-model="formData.type" placeholder="请选择工作性质">
                                <el-option v-for="item in dictMap['StaffType']" :key="item.value" :label="item.name" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                        <!-- 默认是当前用户 -->
                        <el-form-item label="招聘负责人" prop="liableId">
                            <el-select v-model="formData.liableId" placeholder="请选择招聘负责人"></el-select>
                        </el-form-item>
                        <el-form-item label="招聘人数" prop="num">
                            <el-input-number v-model="formData.num" :min="1" :max="99999"/>
                        </el-form-item>
                        <el-form-item label="工作经验" prop="experience">
                            <el-select v-model="formData.experience" placeholder="请选择工作经验">
                                <el-option v-for="item in dictMap['WorkExperience']" :key="item.value" :label="item.name" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="语言要求" prop="languageRequire">
                            <el-select v-model="formData.languageRequire" multiple placeholder="请选择语言要求">
                                <el-option v-for="item in dictMap['Languages']" :key="item.value" :label="item.name" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="紧急程度" prop="urgentLevel">
                            <el-radio-group v-model="formData.urgentLevel">
                                <el-radio label="1">紧急</el-radio>
                                <el-radio label="0">一般</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="工作城市" prop="workLocationCode">
                            <el-cascader ref="formAreaTree" v-model="formData.workLocationCode" :options="cityList" :props="props" @change="locationChange"/>
                        </el-form-item>
                        <el-form-item label="最迟到岗时间" prop="latestWorkDate">
                            <el-date-picker
                                v-model="formData.latestWorkDate"
                                type="date"
                                placeholder="请选择最迟到岗时间"
                                :disabled-date="disableDate"
                                size="small"
                                value-format="YYYY-MM-DD"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="用人部门" prop="oaDeptId">
                            <el-tree-select v-model="formData.oaDeptId" node-key="id" value-key="id" :props="{ value: 'id', label: 'name'}" :data="deptList" check-strictly :render-after-expand="false" filterable/>
                        </el-form-item>
                        <el-form-item label="在名片展示" prop="showCard">
<!--                            <el-checkbox v-model="formData.showCard" label="" size="small" />-->
                            <el-switch v-model="formData.showCard" size="small" active-text="展示" :active-value="1" inactive-text="不展示" :inactive-value="0"/>
                        </el-form-item>
                        <!-- 获取当前企业所有用户 -->
                        <el-form-item label="面试官" prop="interviewers">
                            <el-select v-model="formData.interviewers" multiple placeholder="请选择面试官"></el-select>
                        </el-form-item>
                        <el-form-item label="招聘原因" prop="reason">
                            <el-input v-model="formData.reason" placeholder="请输入招聘原因"/>
                        </el-form-item>
                        <el-form-item label="学历要求" prop="eduLevel">
                            <el-select v-model="formData.eduLevel" placeholder="请选择学历要求">
                                <el-option v-for="item in dictMap['EducationLevel']" :key="item.value" :label="item.name" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="年龄要求">
                            <el-input v-model="formData.ageStart" :disabled="formData.ageRequire === '1'" style="width: 80px"/>&nbsp;-&nbsp;
                            <el-input v-model="formData.ageEnd" :disabled="formData.ageRequire === '1'" style="width: 80px;margin-right: 10px"/>
                            <el-checkbox label="不限" v-model="formData.ageRequire" true-label="1" false-label="0" size="small"/>
                        </el-form-item>
                        <el-form-item label="薪资范围">
                            <el-input v-model="formData.salaryStart" :disabled="formData.salaryInterview === '1'" style="width: 65px"/>&nbsp;-&nbsp;
                            <el-input v-model="formData.salaryEnd" :disabled="formData.salaryInterview === '1'" style="width: 65px"/>
                            <el-select v-model="formData.experience" :disabled="formData.salaryInterview === '1'" style="width: 75px;margin: 0 10px 0 5px">
                                <el-option v-for="item in dictMap['SalaryTimeType']" :key="item.value" :label="item.name" :value="item.value"/>
                            </el-select>
                            <el-checkbox label="面议" v-model="formData.salaryInterview" true-label="1" false-label="0" size="small"/>
                        </el-form-item>
                        <el-form-item label="工作地点" prop="workAddress">
                            <el-input v-model="formData.workAddress" placeholder="请输入工作地点"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="职位描述" prop="remark" style="margin-top: 18px">
                    <el-input v-model="formData.remark" type="textarea"/>
                </el-form-item>
            </el-form>
            <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false">关闭</el-button>
          <el-button size="small" type="primary" @click="submitData(formRef)">保存</el-button>
        </span>
            </template>
        </el-dialog>

        <recruit-post-detail v-model:detailVisible="detailVisible" v-model:dialogVisible="dialogVisible" :defaultForm="formData" :dictMap="dictMap"/>
    </div>
</template>

<script>
import {reactive, toRefs, ref, getCurrentInstance} from 'vue'
import {Filter} from '@element-plus/icons-vue'
import {getPage, createData, editData} from '/@/api/oa/recruit/post'
import {getDictByCodes} from '/@/api/sys/dict'
import {getTreeList} from '/@/api/oa/dept'
import {city} from '/@/utils/city'
import RecruitPostDetail from '../../components/RecruitPostDetail.vue';

export default {
    name: 'oa-recruit-post',
    components: {
        RecruitPostDetail
    },
    setup() {
        const {proxy} = getCurrentInstance()
        const formRef = ref()
        const today = new Date()
        const state = reactive({
            params: {
                current: 1,
                size: 10,
                name: null,
                type: null,
                state: '1',
                workLocation: null,
                oaDeptId: null,
                liableId: null
            },
            paramsWorkLocation: null,
            total: 0,
            tableList: [],
            deptList: [],
            dialogVisible: false,
            detailVisible: false,
            formData: {},
            rules: {
                name: [{required: true, message: '请输入招聘职位名称', trigger: 'blur'}],
                type: [{required: true, message: '请选择工作性质', trigger: 'change'}]
            },
            cityList: city,
            dictMap: {},
            props: {
                expandTrigger: 'hover',
                value: 'code'
            }
        })
        const currentChange = (current) => {
            state.params.current = current
            getTableList()
        }
        const sizeChange = (size) => {
            state.params.size = size
            currentChange(1)
        }
        const getTableList = async () => {
            try {
                if (state.paramsWorkLocation && state.paramsWorkLocation.length > 0) {
                    state.params.workLocation = state.paramsWorkLocation.join(',')
                } else {
                    state.params.workLocation = state.paramsWorkLocation = null
                }
                const res = await getPage(state.params)
                state.total = res.data.total
                state.tableList = res.data.records
            } catch (e) {
                console.log(e)
            }
        }
        const initData = async () => {
            try {
                let res = await getDictByCodes(['StaffType', 'WorkExperience', 'EducationLevel', 'SalaryTimeType', 'Languages'])
                state.dictMap = res.data
                res = await getTreeList()
                state.deptList = res.data
            } catch (e) {
                console.log(e)
            }
        }
        const openCreate = () => {
            state.dialogVisible = true
            initForm()
        }
        const openEdit = () => {
            state.dialogVisible = true
        }
        const submitData = (formRef) => {
            formRef.validate(async (valid) => {
                if (!valid) {
                    return false
                }
                const data = Object.assign({}, state.formData)
                if (data.languageRequire != null && data.languageRequire.length > 0) {
                    data.languageRequire = data.languageRequire.join(',')
                } else {  // 防止[]带入
                    data.languageRequire = null
                }
                if (data.workLocation != null && data.workLocation.length > 0) {
                    data.workLocation = data.workLocation.join(',')
                    data.workLocationCode = data.workLocationCode.join(',')
                } else {  // 防止[]带入
                    data.workLocation = null
                    data.workLocationCode = null
                }
                if (data.id) {
                    await editData(data)
                    if (state.formData.workLocation && state.formData.workLocation.length > 0 && state.formData.workLocation.indexOf(',') < 0) {
                        state.formData.workLocation = state.formData.workLocation.join(',')
                    }
                } else {
                    await createData(data)
                }
                state.dialogVisible = false
                await getTableList()
            })
        }
        const openDetail = recruitPost => {
            state.formData = recruitPost
            state.detailVisible = true
        }
        const resetParams = () => {
            state.params = {
                current: 1,
                size: state.params.size,
                name: null,
                type: null,
                state: '1',
                workLocation: null,
                oaDeptId: null,
                liableId: null
            }
            state.paramsWorkLocation = null
            getTableList()
        }
        const tabChange = (tabName) => {
            state.params.state = tabName
            getTableList()
        }
        const locationChange = () => {
            state.formData.workLocation = proxy.$refs['formAreaTree'].getCheckedNodes()[0].pathLabels
        }
        const initForm = () => {
            state.formData = {
                id: null,
                name: null,
                oaDeptId: null,
                type: null,
                workLocationCode: null,
                workLocation: null,
                workAddress: null,
                num: 1,
                reason: null,
                experience: null,
                eduLevel: null,
                salaryStart: null,
                salaryEnd: null,
                salaryTimeType: '0',
                salaryInterview: null,
                latestWorkDate: null,
                ageStart: null,
                ageEnd: null,
                ageRequire: null,
                languageRequire: null,
                urgentLevel: '1',
                liableId: null,
                state: '1',
                showCard: 0,
                // 职位描述
                remark: null,
                // 面试官列表
                interviewers: []
            }
        }
        const disableDate = (date) => {
            return today.getTime() > date.getTime()
        }
        initData()
        getTableList()
        return {
            ...toRefs(state),
            currentChange,
            sizeChange,
            getTableList,
            openDetail,
            tabChange,
            initData,
            submitData,
            locationChange,
            openCreate,
            openEdit,
            disableDate,
            formRef,
            Filter,
            resetParams
        }
    }
}
</script>

<style scoped lang="scss">
.page-container {
    padding: 1px;

    :deep .el-tabs__header {
        margin: 0;
    }

    .tableList {
        border: 1px solid var(--el-table-border-color);
        border-bottom: none;

        :deep(thead .cell) {
            display: flex;
            align-items: center;
        }

        :deep(thead .el-icon) {
            margin-top: -2px;
        }

        .primary {
            cursor: pointer;
            color: var(--el-color-primary);
        }
    }

    .table-box {
        background: #fff;
        margin-top: 10px;

        :deep(.el-table__header-wrapper .el-table__cell) {
            background: var(--el-color-primary-light-9);
            color: var(--next-bg-menuBar-light-1);
        }
    }

    :deep(.el-form-item) {
        align-items: flex-start;
    }

    .row-item {
        margin-bottom: 10px;

        :deep(.el-form-item:nth-child(2) .el-input__wrapper) {
            width: 116px;
        }
    }

    .remark-item {
        :deep(.el-textarea__inner) {
            width: 444px;
        }
    }
}
</style>
